import type { Directive } from 'vue';
import vtTouchCom from '../v-drag/vtTouchCom.ts';
const vTmp: any = {};
// 定义VUE3指令
const vDrag: Directive = {
    mounted(el: any, binding: any) {
        const { fnPThrottle, vtTouchInit, vtTouchDown, vtTouchUp } = vtTouchCom(
            el,
            binding.value
        );
        vtTouchInit(el);
        let isDragging = false;
        let initialX = 0;
        let initialY = 0;
        let offsetX = 0;
        let offsetY = 0;
        if (typeof binding.value.domarea === 'string') {
            vTmp.dragAreaDom = document.getElementById(binding.value.domarea);
        } else {
            vTmp.dragAreaDom = el;
        }

        // 处理指针按下事件，当用户按下指针时触发此函数，用于初始化拖动状态和相关位置信息
        const onPointerDown = (e: any) => {
            vtTouchDown(el);
            isDragging = true;
            const bVal: any = vTmp.dragAreaDom.getBoundingClientRect();

            // 设置元素为绝对定位
            vTmp.dragAreaDom.style.position = 'absolute';
            vTmp.dragAreaDom.style.transform = `translate(${bVal.x}px, ${bVal.y}px)`;

            initialX = e.clientX - bVal.x;
            initialY = e.clientY - bVal.y;

            // 设置光标样式
            el.style.cursor = 'grabbing';

            // 监听指针移动和松开事件
            document.addEventListener('pointermove', onPointerMove);
            document.addEventListener('pointerup', onPointerUp);
        };

        // 处理指针移动事件，当用户移动指针时触发此函数，用于更新元素的位置并确保元素在窗口范围内
        const onPointerMove = (e: any) => {
            fnPThrottle(() => {
                if (isDragging) {
                    offsetX = e.clientX - initialX;
                    offsetY = e.clientY - initialY;
                    const maxX = window.innerWidth - vTmp.dragAreaDom.offsetWidth;
                    const maxY = window.innerHeight - vTmp.dragAreaDom.offsetHeight;
                    offsetX = Math.max(0, Math.min(offsetX, maxX));
                    offsetY = Math.max(0, Math.min(offsetY, maxY));

                    // 使用 transform 提高性能
                    vTmp.dragAreaDom.style.transform = `translate(${offsetX}px, ${offsetY}px)`;
                }
            });
        };

        // 处理指针松开事件，当用户松开指针时触发此函数，用于结束拖动状态并移除事件监听
        const onPointerUp = () => {
            isDragging = false;
            el.style.cursor = 'grab';
            vtTouchUp(el);
            // 移除事件监听
            document.removeEventListener('pointermove', onPointerMove);
            document.removeEventListener('pointerup', onPointerUp);
        };

        // 绑定指针按下事件
        el.addEventListener('pointerdown', onPointerDown);

        // 挂载清理监听时间的方法
        vTmp.unmounted = () => {
            el.removeEventListener('pointerdown', onPointerDown);
        };
    },

    // 在卸载时清理事件监听
    unmounted(el) {
        typeof vTmp?.unmounted == 'function' && vTmp.unmounted();
    },
};

// 局部使用：
export default vDrag;

// 全局使用示例：
// const directives = {
//   install: function (app: any) {
//     app.directive('move', vDrag);
//   },
// };

// export default directives;
